<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="../lib/bootstrap-3.3.7.css" rel="stylesheet">
    <style>
        #dv{
            position: relative;
        }
        #dv>div:last-child{
            width: 600px;
            position: absolute;
            top: 0;
            left: 50%;
            margin-left: -300px;
            z-index: 1000;
        }
        .mask{
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 999;
            background-color: rgba(0,0,0,.7);
        }
        #dv form{
            margin-bottom: 20px;
        }
        #dv .panel .panel-heading{
            position: relative;
        }
        #dv .panel .panel-heading .btn-group{
            position: absolute;
            right: 60px;
            top: 0;
        }
        #dv .panel .panel-heading .btn-group:hover .dropdown-menu{
            display: block;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
    <script src="../lib/vue-2.4.0.js"></script>
    <script src="../node_modules/axios/dist/axios.js"></script>
</head>
<body>
<div id="dv">
    <div class="mask" v-show="flag"></div>
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">学生表</h3>
            <div class="btn-group">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    {{username}} <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                    <li><a href="#" @click.prevent="signout">退出</a></li>
                </ul>
            </div>
        </div>
        <div class="panel-body">
            <form class="form-inline">
                <div class="form-group">
                    <label for="Name2">名字</label>
                    <input type="text" class="form-control" id="Name2" placeholder="名字" v-model="name">
                </div>
                <div class="form-group">
                    <label for="Name">年龄</label>
                    <input type="number" class="form-control" id="Name" placeholder="年龄" v-model="age">
                </div>
                <div class="form-group">
                    <label>性别：</label>
                    <label>
                        <input type="radio" name="optionsRadios" id="optionsRadios1" value="1" checked v-model="sex">
                        男
                    </label>
                    <label>
                        <input type="radio" name="optionsRadios" id="optionsRadios2" value="2" v-model="sex">
                        女
                    </label>
                </div>
            </form>
            <form class="form-inline">
                <div class="form-group">
                    <label for="InputName">大学</label>
                    <input type="text" class="form-control" id="InputName" placeholder="大学" v-model="edu">
                </div>
                <div class="form-group">
                    <label>城市：</label>
                    <select class="form-control" v-model="city">
                        <option value="1">北京</option>
                        <option value="2">福州</option>
                        <option value="3">厦门</option>
                        <option value="4">龙岩</option>
                        <option value="5">泉州</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="InputName1">学号</label>
                    <input type="number" class="form-control" id="InputName1" placeholder="学号" v-model="no">
                </div>
                <button type="button" class="btn btn-primary" @click.prevent="add">添加</button>
            </form>

            <table class="table table-hover">
                <thead>
                <tr>
                    <th>ID</th>
                    <th>名字</th>
                    <th>性别</th>
                    <th>年龄</th>
                    <th>大学</th>
                    <th>城市</th>
                    <th>学号</th>
                </tr>
                </thead>
                <tbody>
                    <tr v-for="item in list" :key="item.id">
                        <td>{{ item.id }}</td>
                        <td>{{ item.name }}</td>
                        <td>{{ item.sex==1?'男':'女' }}</td>
                        <td>{{ item.age}}</td>
                        <td>{{ item.edu}}</td>
                        <td>{{ item.city | cityFormat}}</td>
                        <td>{{ item.no}}</td>
                        <td>
                            <a href="" class="btn btn-primary" @click.prevent="modify(item.id)">修改</a>
                            <a href="" class="btn btn-warning" @click.prevent="del(item.id)">删除</a>
                        </td>
                    </tr>
                </tbody>
            </table>

            <nav aria-label="Page navigation">
                <ul class="pagination" v-if="list">
                    <li>
                        <a href="#" aria-label="Previous" @click.prevent="prev">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    <li v-for="index in Math.ceil(total / showStudent.size)">
                        <a href="#" @click.prevent="choosePage(index)">{{ index }}</a>
                    </li>
                    <li>
                        <a href="#" aria-label="Next" @click.prevent="next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
    <div class="panel panel-primary" v-show="flag">
        <div class="panel-heading">
            <h3 class="panel-title">修改学生表</h3>
        </div>
        <div class="panel-body">
            <form class="form-horizontal">
                <div class="form-group">
                    <label for="input2" class="col-sm-2 control-label">名字</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="input2" placeholder="名字" v-model="upname">
                    </div>
                </div>
                <div class="form-group">
                    <label for="Name1" class="col-sm-2 control-label">年龄</label>
                    <div class="col-sm-10">
                        <input type="number" class="form-control" id="Name1" placeholder="年龄" v-model="upage">
                    </div>

                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">性别：</label>
                    <div class="col-sm-10">
                        <label>
                            <input type="radio" name="optionsRadios" value="1" checked v-model="upsex">
                            男
                        </label>
                        <label>
                            <input type="radio" name="optionsRadios" value="2" v-model="upsex">
                            女
                        </label>
                    </div>

                </div>
                <div class="form-group">
                    <label for="InputName2" class="col-sm-2 control-label">大学</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="InputName2" placeholder="大学" v-model="upedu">
                    </div>

                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">城市：</label>
                    <div class="col-sm-10">
                        <select class="form-control" v-model="upcity">
                            <option value="1">北京</option>
                            <option value="2">福州</option>
                            <option value="3">厦门</option>
                            <option value="4">龙岩</option>
                            <option value="5">泉州</option>
                        </select>
                    </div>

                </div>
                <div class="form-group">
                    <label for="InputName11" class="col-sm-2 control-label">学号</label>
                    <div class="col-sm-10">
                        <input type="number" class="form-control" id="InputName11" placeholder="学号" v-model="upno">
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="button" class="btn btn-primary" @click="update">确定</button>
                        <button type="button" class="btn btn-warning" @click="flag=false">取消</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script src="../js/student.js"></script>
</body>
</html>